<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery彩色动画Tabs选项卡特效 - A5源码</title>



<link type="text/css" rel="stylesheet" href="css/colorfulTab.min.css">

</head>
<body>


  <!-- Background Image -->
  <div class="colorful-tab-wrapper" id="colorful-background-image">
	<ul class="colorful-tab-menu">
	  <li class="colorful-tab-menu-item active" tab-background="img/tab1.jpg"><a href="#bg-0">用户表</a></li>
	  <li class="colorful-tab-menu-item" tab-background="img/tab2.jpg"><a href="#bg-1">活动表</a></li>
	  <li class="colorful-tab-menu-item" tab-background="img/tab3.jpg"><a href="#bg-2">审核人表</a></li>
	  <li class="colorful-tab-menu-item" tab-background="img/tab4.jpg"><a href="#bg-3">审核情况表</a></li>
	</ul>
	<div class="colorful-tab-container">  
	  <div class="colorful-tab-content active" id="bg-0">  

	  </div>
	  <div class="colorful-tab-content" id="bg-1"> 
	  <p>11
	  </div>
	  <div class="colorful-tab-content" id="bg-2"> 
	  <p>22
	  </div>
	  <div class="colorful-tab-content" id="bg-3"> 
	  <p>33
	  </div>
	 
	</div>
  </div>



<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/colorfulTab.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	$("#colorful").colorfulTab();    
	
	$("#colorful-elliptic").colorfulTab({
		theme: "elliptic"
	}); 
   
   $("#colorful-flatline").colorfulTab({
		theme: "flatline"
	});    
	
	$("#colorful-background-image").colorfulTab({
		theme: "flatline",
		backgroundImage: "true",
		overlayColor: "#002F68",
		overlayOpacity: "0.8"
	});   

});
</script>


</body>
</html>